<template>
  <div id="Service">
    <div class="container text-center">
      <h3>我们的教练</h3>
    </div>
    <div class="container">
      <div class="Service-container row">
        <div class="Service-item col-xs-12 col-sm-6 col-md-3" v-for="(item, index) in serviceList" :key="index"
          @click="ServiceClick(item.id)">
          <div class="Service-item-wrapper">
            <div class="Service-item-img">
              <img :src="item.avatar" alt="教练">
            </div>
            <div class="Service-item-top">
              <h4>{{ item.name }}</h4>
              <p>年龄：{{ item.age }}</p>
              <p>性别：{{ item.gender == 1 ? '男' : '女' }}</p>
            </div>
            <div class="Service-item-border"></div>
          </div>
        </div>
      </div>
      <Page :total="total" size="small" show-elevator show-sizer @on-change="pageChange" @on-page-size-change="sizeChange"/>
    </div>
  </div>
</template>
<script>
import { getCoachListApi } from '@/api/api'
export default {
  name: 'Service',
  data() {
    return {
      serviceList: [],
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        title: ''
      },
      total: 0
    }
  },
  created() {
    this.getCoachList();
  },
  methods: {
    getCoachList() {
      getCoachListApi(this.queryParams).then(res => {
        this.serviceList = res.data.rows;
        this.total = res.total;
      })
    },
    ServiceClick(id) {
      this.$router.push({
        name: 'servicedetail',
        query: {
          id: id
        }
      })
    }
  }
}
</script>
<style scoped>
.Service-container {
  padding: 30px 50px;
}

.Service-item {
  margin-bottom: 50px;
}

.Service-item-wrapper {
  cursor: pointer;
  background: rgba(244, 244, 244, 1);
  overflow: hidden;
  position: relative;
}

.Service-item-top {
  width: 100%;
  padding: 10px;
  text-align: center;
}

.Service-item-img {
  width: 100%;
  height: 250px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

.Service-item-img img {
  width: 100%;
  height: 100%;
}
</style>
